<template>
	<view class="login">
		<text class="login_title">嘉园店铺平台</text>
		<uni-forms :modelValue="formData" style="width: 80%;" ref='formRef' :rules="rules">
			<uni-forms-item label="账号:" name="username" required>
				<uni-easyinput type="text" v-model="formData.username" placeholder="请输入账号" />
			</uni-forms-item>
			<uni-forms-item label="密码:" name="password" required>
				<uni-easyinput type="password" v-model="formData.password" placeholder="请输入账号" />
			</uni-forms-item>
			<button @click="handleLogin" class="login_btn">登录</button>
		</uni-forms>
	</view>
</template>

<script setup>
	import {
		encrypt
	} from '@/utils/rsaEncrypt'
	import {
		reactive,
		ref
	} from 'vue';

	const rules = {
		// 对name字段进行必填验证
		username: {
			rules: [{
				required: true,
				errorMessage: '请填写账号',
			}],
		},
		password: {
			rules: [{
				required: true,
				errorMessage: '请填写密码',
			}],
		}
	}
	const formData = reactive({
		username: '',
		password: ''
	})
	const formRef = ref()
	const handleLogin = async () => {
		await formRef.value.validate()
		const res = await uni.request({
			url: '/auth/loginDp',
			method: 'post',
			data: {
				username: formData.username,
				password: encrypt(formData.password)
			},
			noToken: true
		})
		const {
			token,
			user,
			roles
		} = res
		uni.setStorageSync('token', token)
		uni.setStorageSync('user', user)
		uni.setStorageSync('roles', roles)
		uni.navigateTo({
			url: '/pages/home/index'
		})
	}
</script>

<style scoped lang="scss">
	.login {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background-color: #fff;
		background-image: url('/static/login_bgk.png');
		background-size: 100% 100%;
		background-position: bottom;
		background-repeat: no-repeat;

		&_title {
			padding-bottom: 100rpx;
			color: $uni-color-primary;
			font-size: 60rpx;
			font-weight: bold;
			text-shadow: 1px -1px #fff, -1px 1px #999, -10px 10px 5px rgba(128, 128, 128, .5019607843);
		}
	}

	.login_btn {
		color: #fff;
		background-color: $uni-color-primary;
	}
</style>